<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
        }
        .box1{
            background: yellow;
        }
        .box2{
            background: pink;
            /* position: absolute; */
            /* position: relative; */
            position: fixed;
            /* left: 0; */
            /* top: 0; */
            /* right: 0; */
            /* bottom: 0; */
            /* right: 10px; */
            /* bottom: 10px; */
            left: 500px;
            top: 500px;
        }
        .box3{
            background: red;
            width: 130px;
            height: 130px;
        }
        .box4{
            height: 3000px;
            background: gray;
        }
    </style>
</head>
<body>
    <!-- 
        1. 场景:当多个元素发生重叠时
        2. 定位:
            position:absolute       绝对定位
                     relative       相对定位
                     fixed          固定定位
                     static         默认,静态(没有定位)
        3. 绝对定位
            位置:不保留原来的位置
            原点:基于第一页的四个角落
        4. 相对定位
            位置:保留原来的位置
            原点:基于原来位置的四个角落
        5. 固定定位
            位置:不保留原来的位置
            原点:基于当前可视窗口的四个角落
     -->
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box4"></div>
</body>
</html>